<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onmousedown、onmouseup 以及 onclick 事件</title>
</head>

<!-- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
    首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，
    最后，当完成鼠标点击时，会触发 onclick 事件。 -->

<body>
    <div onmousedown="mDown(this)" onmouseup="mUp(this)"
        style="background-color: rgb(217, 74, 56); width: 170px; height: 80px; margin: 20px; padding-top: 20px; color: rgb(255, 255, 255); font-weight: bold; font-size: 18px; float: left; text-align: center;">
        Thank You</div>
    <!-- <div onmousedown="mDown(this)" onmouseup="mUp(this)"
        style="background-color: rgb(30, 197, 229); width: 170px; height: 80px; margin: 20px; padding-top: 20px; color: rgb(255, 255, 255); font-weight: bold; font-size: 18px; float: left; text-align: center;">
        Release Me</div> -->
    <script>
        function mDown(obj) {
            obj.style.background = "rgb(30, 197, 229)";
            obj.innerText = "Release Me";
        }
        function mUp(obj) {
            obj.style.background = "rgb(217, 74, 56)";
            obj.innerText = "Thank You";
        }
    </script>
</body>

</html>